<template>
  <el-card>
    <el-form ref="dataRef" label-width="80px" :model="form" :rules="usersRules">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" :disabled="this.form && !this.form.create"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="密码" prop="password">
            <el-input prefix-icon="el-icon-lock" v-model="form.password"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="昵称">
            <el-input v-model="form.displayname"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="余额">
            <el-input v-model="form.balance" :disabled="!this.defForm.manage"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="创建时间">
            <el-input v-model="form.createTime" :disabled="form.type != 3"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="修改时间">
            <el-input v-model="form.changeTime" :disabled="form.type != 3"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="登陆时间">
            <el-input v-model="form.useTime" :disabled="form.type != 3"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户类型">
            <el-select v-model="form.type" placeholder="请选择用户类型" :disabled="!this.defForm.manage">
              <el-option v-for="(item, i) in $userType" :label="item" :value="i" :key="i"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="姓名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="地址">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="常住地址">
            <el-input v-model="form.PermanentAddress"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="身份证">
            <el-input v-model="form.userCode"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="6">
          <el-form-item label="电话">
            <el-input v-model="form.tel"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="邮箱">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="驾驶证">
            <el-input v-model="form.driverCode"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="签名">
        <el-input type="textarea" v-model="form.info" rows="1"></el-input>
        <kindeditor :options="options" v-model="form.info"></kindeditor>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="upData">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
        <el-button type="success" @click="sendEvent(1) ">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import kindeditor from "../kindeditor";

export default {
  components: { kindeditor },
  props: ["fdata"],
  watch: {
    fdata: {
      handler(newValue, oldValue) {
        let tmp = this.$del(newValue, ["0"]);
        console.log(tmp);
        this.form = newValue;
        this.defForm = tmp;
      }
    }
  },
  data() {
    return {
      form: {},
      defForm: {},
      content: null,
      options: {},
      usersRules: {
        username: [
          { required: true, message: "请输入登录名称", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          { min: 5, max: 10, message: "长度在 5 到 10 个字符", trigger: "blur" }
        ]
      }
    };
  },
  // computed() {return{}},
  created() {
    if (this.fdata && this.fdata.create) this.form.create = true;
    if (!this.form.ID) {
      this.form = this.fdata;
      this.defForm = this.$del(this.fdata, ["0"]);
    }
    // console.log(this.fdata,this.form);
  },
  methods: {
    sendEvent(val) {
      // console.log(val);
      // this.client.create = true;
      this.$emit("cEvent", val);
    },
    upData() {
      this.$refs.dataRef.validate(val => {
        if (val) {
          this.form.state = this.form.state ? 0 : 1;
          let data = {
            cmd: this.form.create ? 2 : 1,
            val: this.form
          };

          data.val["token"] = localStorage.getItem("token");
          data.val["table"] = "users";
          // console.log( data);
          this.$axios
            .post("q.php", data)
            .then(res => {
              // console.log(res.data);
              if (res.data) {
                // console.log(res.data);
                this.$message.success("操作成功");
                this.$emit("child-event", true);
              } else {
                this.$message.error("发生错误!数据非法或没有权限");
              }
            })
            .catch(err => {
              this.$message.error("2发生错误!可能您与服务器的网络连接中断");
            });
        }
      });
    },
    resetForm() {
      // this.$emit('child-event', true);
      this.$refs.dataRef.resetFields();
      for (const key in this.defForm) {
        this.form[key] = this.defForm[key];
      }
      // console.log(this.fdata);
    }
  }
};
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.quill-editor {
}
</style>
